<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>进度列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>

<!--按条件查询-->
<form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">进度ID</label>
        <div class="layui-input-inline">
            <input type="number" name="progressId" placeholder="请输入进度ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">进度类型</label>
        <div class="layui-input-inline">
            <input type="text" name="progressType" placeholder="请输入进度类型" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">创建人</label>
        <div class="layui-input-inline">
            <input type="text" name="createBy" placeholder="请输入创建人" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="selectFormFilter">查询</button>
            <button type="reset" class="layui-btn layui-btn-normal" id="myButton">重置</button>
        </div>
    </div>
</form>


<body>
<!--分层，层级显示客户关联表-->
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="customTable" lay-filter="customFilter"></table>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="businessTable" lay-filter="businessFilter"></table>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <table id="showProgress" lay-filter="progressFilter"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!--顶部工具栏-->
<script type="text/html" id="progressToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs" lay-event="addProgress">添加进度</button>
<!--        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="batchDownload">批量下载</button>-->
    </div>
</script>
<!--添加功能的form-->
<form class="layui-form" action="" id="addProgressForm" lay-filter="addProgressFormFilter"
      style="display: none;margin-right: 40px;margin-top: 20px">

    <!--隐藏input框，获取相应值-->
    <input hidden th:value="${session.username}" name="createBy">
    <input type="hidden" name="uploadDtName" id="insertUploadDtName">
<!--    <input type="hidden" name="noticeDtName" id="insertNoticeDtName">-->
    <input type="hidden" name="uploadId" id="uploadId">
    <input type="hidden" name="uploadSourceName" id="insertUploadSourceName">

    <div class="layui-form-item">
        <label class="layui-form-label">进度类型</label>
        <div class="layui-input-block">
            <select name="progressType">
                <option value="1.商标申请受通">1.商标申请受通</option>
                <option value="2.公告">2.公告</option>
                <option value="3.下证">3.下证</option>
                <option value="4.领证书">4.领证书</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">业务编号</label>
        <div class="layui-input-block">
            <input type="number" name="businessId" readonly id="addBusinessTableSelect"
                   lay-verify="required" placeholder="请选择业务编号"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">业务名</label>
        <div class="layui-input-block">
            <input type="text" readonly id="businessName" name="businessName"
                   lay-verify="required" placeholder="显示业务名，无需输入"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            <button type="button" class="layui-btn layui-btn-xs" id="insertAddUpload">上传文件</button>
        </label>
        <div class="layui-input-block">
            <input type="text" id="insertAddSourceName"
                   placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <p id="insertAddText"></p>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="remark" placeholder=""
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" id="addProgressButton" lay-submit="" lay-filter="addProgressFilter">
                立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-normal">重置</button>
        </div>
    </div>
</form>
<!--修改进度表单-->
<form class="layui-form" action="" id="updateProgressForm" lay-filter="updateProgressFormFilter"
      style="display: none;margin-right: 40px;margin-top: 20px">
    <!--隐藏input框，获取相应值-->
    <input hidden th:value="${session.username}" name="updateBy">
    <input type="hidden" name="progressId">
    <input type="hidden" name="uploadId">

    <input type="hidden" name="uploadDtName" id="updateUploadDtName">
    <input type="hidden" name="noticeDtName" id="updateNoticeDtName">
    <input type="hidden" name="uploadSourceName" id="updateUploadSourceName">

    <div class="layui-form-item">
        <label class="layui-form-label">进度类型</label>
        <div class="layui-input-block">
            <select name="progressType">
                <option value="1.商标申请受通">1.商标申请受通</option>
                <option value="2.公告">2.公告</option>
                <option value="3.下证">3.下证</option>
                <option value="4.领证书">4.领证书</option>
            </select>
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">业务编号</label>-->
<!--        <div class="layui-input-block">-->
<!--            <input type="number" name="businessId" readonly id="updateBusinessTableSelect"-->
<!--                   lay-verify="required" placeholder=""-->
<!--                   autocomplete="off"-->
<!--                   class="layui-input">-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">业务名</label>-->
<!--        <div class="layui-input-block">-->
<!--            <input type="text" readonly name="businessNameUpdate" id="businessNameUpdate"-->
<!--                   lay-verify="required" placeholder="显示业务名，无需输入"-->
<!--                   autocomplete="off"-->
<!--                   class="layui-input">-->
<!--        </div>-->
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            <button type="button" class="layui-btn layui-btn-xs" id="updateAddUpload">上传文件</button>
        </label>
        <div class="layui-input-block">
            <input type="text" id="updateAddSourceName"
                   placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <p id="updateAddText"></p>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="remark" placeholder=""
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" align="center">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="updateProgressFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-normal">重置</button>
        </div>
    </div>
</form>
<!--实现菜单管理操作功能按钮-->
<script type="text/html" id="progressBar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改进度</a>
</script>

<script>
    //自定义layui组件的目录
    layui.config({
        base: '/layui/lay/modules/'
    }).extend({
        //设定组件别名
        tableSelect: 'tableSelect',
    });
    layui.use(['table', 'layer', 'jquery', 'form', 'laydate','tableSelect', 'upload'], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let table = layui.table;
        let laydate = layui.laydate;
        let upload = layui.upload;
        let tableSelect = layui.tableSelect;

        //添加业务编号选择表格
        tableSelect.render({
            elem: '#addBusinessTableSelect',	//定义输入框input对象 必填
            checkedKey: 'businessId', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'businessName',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '业务名与申请号搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '/business/queryAll',
                cols: [
                    [
                        {type: 'radio'}
                        , {field: 'businessId', title: '业务编号', width: 100, sort: true}
                        , {field: 'applicantCode', title: '申请号', width: 160}
                        , {field: 'applicantTime', title: '申请时间', width: 160}
                        , {field: 'businessName', title: '业务名', width: 160}
                        , {field: 'businessTopType', title: '业务类型', width: 100,}
                        , {field: 'businessSecondType', title: '业务种类', width: 160}
                        , {field: 'uploadId', title: '已上传文件ID', width: 160}
                    ]
                ]
            },
            done: function (elem, data) {

                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                let businessId = data.data[0].businessId
                elem.val(businessId);
                $("#applicantCode").val(data.data[0].applicantCode)
                $("#businessName").val(data.data[0].businessName)
                $("#uploadId").val(data.data[0].uploadId)
            }
        })

        //修改业务编号选择表格
        tableSelect.render({
            elem: '#updateBusinessTableSelect',	//定义输入框input对象 必填
            checkedKey: 'businessId', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'contact',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '联系人姓名搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '/business/queryByCondition',
                cols: [
                    [
                        {type: 'radio'}
                        , {field: 'businessId', title: '业务编号', width: 100, sort: true}
                        , {field: 'applicantCode', title: '申请号', width: 160}
                        , {field: 'applicantTime', title: '申请时间', width: 160}
                        , {field: 'businessName', title: '业务名', width: 160}
                        , {field: 'businessTopType', title: '业务类型', width: 100,}
                        , {field: 'businessSecondType', title: '业务种类', width: 160}
                    ]
                ]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                elem.val(data.data[0].businessId)
            }
        })

        //日期
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });


        //获取传过来的businessId
        let businesseId = "";
        businesseId = [[${businessId}]] + "";
        //生成表格
        // let progressUrl = '/progress/queryAll?businessId=' + businesseId
        let progressTable = table.render({
            elem: '#showProgress'
            , url: '/progress/queryAll'
            , toolbar: '#progressToolbar'
            , title: 'menuTable'
            , page: true
            , defaultToolbar: ''
            , cols: [
                [
                    // {type: 'checkbox', fixed: 'left'},
                    {field: 'progressId', title: '进度ID', width: 80, fixed: 'left'},
                    {field: 'applicant', title: '申请人', width: 80},
                    {field: 'proxy', title: '代理人', width: 80},
                    {field: 'applicantTime', title: '申请时间', width: 110,sort:true},
                    {field: 'businessName', title: '业务名', width: 120,},
                    {field: 'progressType', title: '进度类型', width: 120},
                    {
                        field: 'uploadId', title: '进度文件(点击下载)', width: 170,
                        templet: function (progress) {
                            if (progress.uploadId != null) {
                                return '<a href="' + progress.destinationName + '">' + progress.sourceName + '</a>';
                            } else {
                                return "";
                            }
                        }
                    },
                    {field: 'businessId', title: '业务ID', width: 80, hide: true},
                    {field: 'createBy', title: '创建人', width: 80},
                    {field: 'createTime', title: '创建时间', width: 100},
                    {field: 'updateBy', title: '更新人', width: 80,hide:true},
                    {field: 'updateTime', title: '更新时间', width: 100,hide:true},
                    {field: 'remark', title: '备注', width: 160},
                    {fixed: 'right', align: 'center', toolbar: '#progressBar', title: '操作', width: 100}
                ]
            ]
        });

        //获取传过来的customId
        let customeId = "";
        customeId = [[${customId}]] + "";
        if (customeId == 0) {
            document.getElementById("customTable").hidden = true
        } else {
            document.getElementById("customTable").hidden = false
            let customUrl = '/custom/selectOne?id=' + customeId
            let customTable = table.render({
                elem: '#customTable'
                , url: '/custom/queryAll2'//数据接口
                , where:{
                    customeId:customeId
                }
                , page: true //开启分页
                , cols: [
                    [ //表头
                        {field: 'customId', title: '客户ID', align: 'center', sort: true, width: 90}
                        , {field: 'contact', title: '联系人姓名', align: 'center', width: 120}
                        , {field: 'phone', title: '手机号', align: 'center', width: 140}
                        , {field: 'applicant', title: '申请人', align: 'center', width: 120}
                        , {field: 'customAddress', title: '邮寄地址', align: 'center', width: 120}
                        , {field: 'createBy', title: '创建人', align: 'center', width: 120}
                        , {field: 'createTime', title: '创建时间', align: 'center', width: 160}
                        , {field: 'updateBy', title: '修改人', align: 'center', width: 120}
                        , {field: 'updateTime', title: '修改时间', align: 'center', width: 160}
                        , {field: 'proxyId', title: '代理人ID', align: 'center', width: 120, hide: true}
                        , {field: 'userName', title: '代理人', align: 'center', width: 120}
                        , {field: 'remark', title: '备注', align: 'center', width: 120}
                    ]
                ]
            });
            // progressTable.reload({
            //     where: { //设定异步数据接口的额外参数，任意设
            //         customId:customeId+""
            //     }
            //     , page: {
            //         curr: 1 //重新从第 1 页开始
            //     }
            // });
        }

        if (businesseId == 0) {
            document.getElementById("businessTable").hidden = true
        } else {
            document.getElementById("businessTable").hidden = false
            // let businessUrl = '/business/selectOne?id=' + businesseId
            let businessTable = table.render({
                elem: '#businessTable'
                , url: '/business/queryAll' //数据接口
                , where:{
                    businesseId:businesseId
                }
                , page: true //开启分页
                , cols: [
                    [ //表头
                        {field: 'businessId', title: '业务编号', width: 100, sort: true}
                        , {field: 'customId', title: '客户ID', width: 100, hide: true}
                        , {field: 'customName', title: '客户名称', width: 120}
                        , {field: 'applicantCode', title: '申请号', width: 160}
                        , {field: 'applicantTime', title: '申请时间', width: 160}
                        , {field: 'businessName', title: '业务名', width: 160}
                        , {field: 'trademarkType', title: '商标类别', width: 200}
                        , {field: 'businessTopType', title: '业务类型', width: 100,}
                        , {field: 'businessSecondType', title: '业务种类', width: 160}
                        , {field: 'price', title: '成交价格', width: 100}
                        , {field: 'proxyMoney', title: '代理费', width: 100}
                        , {field: 'createBy', title: '代理人', width: 80}
                        , {field: 'createTime', title: '创建时间', width: 160}
                        , {field: 'updateBy', title: '修改人', width: 80}
                        , {field: 'updateTime', title: '修改时间', width: 160}
                        , {field: 'remark', title: '备注', width: 100}
                    ]
                ]
            });
        }

        let options = '';
        let $progressTypeSelect = $("select[name=progressType]");
        $.ajax({
            url: "/progress/findAllProgress",
            type: "GET",
            dataType: "JSON",
            success: function (allProgress) {
                //将数据放到select中
                for (let i = 0; i < allProgress.length; i++) {
                    options += '<option value="' + allProgress[i].dictionary_name + '">' + allProgress[i].dictionary_name + '</option>';
                }
                $progressTypeSelect.html(options)
            }
        });

        //监听头部工具栏事件
        table.on('toolbar(progressFilter)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data;
            switch (obj.event) {
                case 'batchDownload':
                    let fileNames = "";
                    for (let i = 0; i < data.length; i++) {
                        fileNames += data[i].destinationName + ";";
                    }
                    let zipFileName = data[0].businessName;
                    /*$.ajax({
                        url: "/file/downloads",
                        type: "GET",
                        dataType: "JSON",
                        traditional: true,
                        data: {
                            "fileNames": fileNames,
                            "zipFileName": zipFileName
                        }
                    });*/
                    break;
                case 'addProgress':
                    $("#addProgressButton").attr("class", "layui-btn")
                    document.getElementById("addProgressForm").reset();
                    if ($("#addBusinessTableSelect").val() != "") {
                        $.ajax({
                            url: "/business/selectOne?businessId=" + $("#addBusinessTableSelect").val(),
                            type: "GET",
                            success: function (ret) {
                                form.val('addProgressFormFilter', {
                                    "businessName": ret.data[0].businessName
                                    , "applicantCode": ret.data[0].applicantCode
                                });
                            }
                        });
                    }
                    //重新渲染表单
                    form.render()
                    layer.open({
                        title: '添加进度',
                        type: 1,
                        area: ['500px', '450px'],
                        content: $('#addProgressForm')//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    break;
            }
        });

        //监听行工具栏事件
        table.on('tool', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'edit') {
                // document.getElementById("updateProgressForm").reset();
                // //弹出对话框之前，需要填充表单数据
                // $.ajax({
                //     url: "/business/selectOne?businessId=" + data.businessId,
                //     type: "GET",
                //     success: function (ret) {
                //         form.val('updateProgressFormFilter',data);
                //     }
                // })
                form.val('updateProgressFormFilter',data);
                layer.open({
                    title: '修改进度',
                    type: 1,
                    area: ['500px', '450px'],
                    content: $("#updateProgressForm")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            }
        });

        //添加表单提交按钮事件
        form.on('submit(addProgressFilter)', function (data) {
            if (document.getElementById("addProgressButton").className != "layui-btn layui-btn-disabled") {
                //提交表单数据
                $.ajax({
                    url: "/progress/insert",
                    type: "POST",
                    dataType: "JSON",
                    data: data.field,
                    success: function (ret) {
                        if (ret.code == 0) {
                            //关闭对话框
                            layer.closeAll();
                            //刷新表格数据
                            progressTable.reload({
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                            layer.msg(ret.msg, {icon: 6});
                        } else {
                            layer.msg(ret.msg, {icon: 5});
                        }
                    }
                })
                $("#addProgressButton").attr("class", "layui-btn layui-btn-disabled")
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            } else {
                return false;
            }
        });

        //修改表单提交按钮事件
        form.on('submit(updateProgressFilter)', function (data) {
            //提交表单数据
            $.ajax({
                url: "/progress/update",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        //关闭对话框
                        layer.closeAll();
                        //刷新表格数据
                        progressTable.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.msg(ret.msg, {icon: 6});
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //增加的文件上传
        let insertAddUpload = upload.render({
            elem: '#insertAddUpload'
            , url: '/upload/addFile'  //上传接口
            , accept: 'file' //普通文件
            , done: function (res) {
                if(res.code==0){
                    //给隐藏的input框赋值，传入后台
                    $("#insertUploadDtName").val(res.data.filePath);
                    $("#insertUploadSourceName").val(res.data.fileName)
                    //回显原文件名
                    $("#insertAddSourceName").val(res.data.fileName);
                    layer.msg('上传成功');
                }else {
                    return layer.msg('上传失败')
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                let insertAddText = $('#insertAddText');
                insertAddText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs uploadReload">重试</a>');
                insertAddText.find('.uploadReload').on('click', function () {
                    insertAddUpload.upload();
                });
            }
        });

        //编辑的文件上传
        let updateAddUpload = upload.render({
            elem: '#updateAddUpload'
            , url: '/upload/updateFile' //上传接口
            , accept: 'file' //普通文件
            , done: function (res) {
                if(res.code==0){
                    //给隐藏的input框赋值，传入后台
                    $("#updateUploadDtName").val(res.data.filePath);
                    $("#updateUploadSourceName").val(res.data.fileName)
                    //回显原文件名
                    $("#updateAddSourceName").val(res.data.fileName);
                    layer.msg('上传成功');
                }else {
                    return layer.msg('上传失败')
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                let updateAddText = $('#updateAddText');
                updateAddText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs uploadReload">重试</a>');
                updateAddText.find('.uploadReload').on('click', function () {
                    updateAddUpload.upload();
                });
            }
        });

        //查询提交按钮
        form.on('submit(selectFormFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            progressTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    progressId: data.field.progressId,
                    progressType: data.field.progressType,
                    createBy: data.field.createBy
                    ,startTime:data.field.startTime
                    ,endTime:data.field.endTime
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //重置条件查询表单，刷新table数据
        $("#myButton").click(function () {
            progressTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    progressId: "",
                    progressType: "",
                    createBy: ""
                    ,startTime:""
                    ,endTime:""
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>
</html>